<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06_组件间通信（父向子）</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">
        let app = document.getElementById("app")
        let {Fragment,Component} = React
        /*
        * react里父组件向子组件传值：props
        * 给子组件设置props
        * */

        class App extends Component{
            constructor(props) {
                super(props);
                this.state={
                    appMsg:"app数据",
                    appArray:[1,2,3,4,5,6]
                }
            }
            render() {
                return (
                    <fieldset>
                        <legend><h2>App组件</h2></legend>
                        {/*核心代码*/}
                        <Child1 c1Msg={this.state.appMsg} c1Arr={this.state.appArray}></Child1>
                    </fieldset>
                );
            }
        }

        class Child1 extends Component{
            constructor(props) {
                super(props);
            }
            render() {
                return (
                    <fieldset>
                        <legend><h3>Child1</h3></legend>
                        <div>接收到App的数据：{this.props.c1Msg}
                            {
                                this.props.c1Arr.map((v,i)=><p key={i}>{v}</p>)
                            }
                        </div>
                    </fieldset>
                );
            }
        }

        ReactDOM.render(<App></App>,app)
    </script>
</body>
</html>